<template>
	<view class="form-input-box">
		<text class="form-text" :style="{'min-width':minWidth}" v-if="showTitle">{{title}}</text>
		<view class="input-box" @tap="didSelect">
			<input class="input" :style="isSelect ? 'pointer-events: none' : ''" :type="keyboardType" :value="modelValue" :placeholder="placeholder" placeholder-style="font-size: 28rpx;" :maxlength="maxCount" :password="password" @input="$emit('update:modelValue',$event.detail.value)" @blur="$emit('onBlur')" />
		</view>
		<slot name="right">
			<!-- 默认插槽占位 -->
			<view>
				<image v-if="showRightIcon && isSelect" class="right-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
			</view>
		</slot>
		<view class="line"></view>
	</view>
</template>

<script setup>
	const emits = defineEmits(['update:modelValue', 'showSelect','onBlur'])
	const props = defineProps({
		//标题
		title: {
			type: String,
			default: '标题'
		},
		//是否展示标题，默认显示
		showTitle: {
			type: Boolean,
			default: true
		},
		//提示输入信息
		placeholder: {
			type: String,
			default: '请输入'
		},
		//双向绑定值
		modelValue: {
			type: String,
			default: ''
		},
		//是否显示右侧箭头,
		showRightIcon: {
			type: Boolean,
			default: true
		},
		//是否是选择组件，默认输入组件
		isSelect: {
			type: Boolean,
			default: false
		},
		//键盘类型类型,默认text
		keyboardType: {
			type: String,
			default: 'text'
		},
		//最大输入长度，默认不限
		maxCount: {
			type: Number,
			default: -1
		},
		//是否是密码输入框，默认否
		password: {
			type: Boolean,
			default: false
		},
		//标题最小宽度
		minWidth: {
			type: String,
			default: '120rpx'
		}
	})
	//点击选择
	const didSelect = () => {
		if (props.isSelect) {
			emits('showSelect')
		}
	}
</script>

<style lang="scss" scoped>
	.form-input-box {
		position: relative;
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: white;
		box-sizing: border-box;
		font-size: 28rpx;

		.line {
			position: absolute;
			left: 30rpx;
			right: 0;
			bottom: 0;
			height: 1px;
			transform: scaleY(0.5);
			background-color: $xh-line-color;
		}

		.form-text {
			flex-shrink: 0;
			min-width: 120rpx;
			margin-right: 40rpx;
		}

		.input-box {
			flex: 1;
			background-color: white;

			.input {
				font-size: 28rpx;
				margin-right: 20rpx;

			}
		}

		.right-icon {
			flex-shrink: 0;
			width: 24rpx;
			height: 24rpx;
		}
	}
</style>